<template>
  
  <div class="out">
    <div>
    <span style="width: 25%;float: left">
      <el-select v-model="option">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      >
      </el-option>
      
    </el-select>
    </span>
      <span style="width: 60%;float: left">
      <el-input v-model="input" placeholder="请输入搜索字段" clearable/>
    </span>
      <span style="float: left;width: 15%">
      <el-button type="primary" @click="search" >搜索</el-button>
    </span>
    <div style="clear:both;"></div>
    </div>

    <el-divider></el-divider>
    <el-scrollbar max-height="800px" v-loading="loading">
      <el-result v-if="hits.length===0"
                 icon="info"
                 title="结果为空"
                 sub-title="搜索结果为空"
      >

      </el-result>

      <div v-else>
        <div class="box" v-for="item in hits">
          <el-descriptions
              :title="'ID: '+ item.id"
              :column="1"
              border
              style="font-size: 16px;word-break: break-word;"
          >
            <template #extra>
              <el-button size="small" round @click="add(option,item.id,item.value)" >添加 </el-button>
            </template>
            <el-descriptions-item>
              <template #label>
                <span class="label">{{ label }}</span>
              </template>
              <el-link v-if="item.url!==undefined" :href="item.url" target="_blank">
                <span class="link" >{{item.value}}</span>
              </el-link>
              <span v-else>{{item.value}}</span>

            </el-descriptions-item>

          </el-descriptions>
        </div>

      </div>
    </el-scrollbar>
    
    
  </div>
  
</template>

<script>
import axios from "../../utils/MyAxios";
import {ElMessage} from "element-plus";
import {ref,reactive} from "vue";


export default {
  name: "Search",
  data(){
    return{
      loading:false,
      options:[
        {
          label: "参考文献",
          value: "paper",
        },
        {
          label: "学者",
          value: "author",
        },
        {
          label: "期刊",
          value: "journal"
        },
        {
          label: "会议录",
          value: "series"
        },
        {
          label: "会议",
          value: "instance"
        },
        {
          label: "学科领域",
          value: "field"
        }
      ],
      option:"paper",
      input: "",
      hits:[],
      label: "",
    }
  },
  methods:{
    add(which,id,value){
      this.$emit("add",which,id,value)
    },
    search(){
      if(this.input===null||this.input===""){
        ElMessage.info("请输入搜索字段")
        return;
      }
      this.loading = true;
      switch (this.option){
        case "paper":
          this.paperSearch();
          break;
        case "author":
          this.authorSearch();
          break
        case "journal":
          this.journalSearch();
          break;
        case "series":
          this.seriesSearch();
          break;
        case "instance":
          this.instanceSearch();
          break;
        case "field":
          this.fieldSearch();
          break;
      }
    },
    paperSearch(){
      let data={
        "_source": {
          "includes": ["id","title"]
        },
        "query": {
          "bool": {
            "must": [
              {
                "match_phrase": {
                  "title": this.input
                }
              }
            ]
            
          }
        },
        "from": 0,
        "size": 10,
      }
      axios.post("/es/paper_new/_search",data)
      .then(res=>{
        console.log(res);
        this.loading = false;
        this.label = "文献标题"
        this.hits = res.data.hits.hits.map(item=>{
          return {
            id: item._source.id,
            value: item._source.title,
            url: `/detail?authorId=${item._source.id}`
          }
        })
      })
    },
    authorSearch(){
      let data={
        "_source": {
          "includes": ["id","name"]
        },
        "query": {
          "bool": {
            "must": [
              {
                "match_phrase": {
                  "name": this.input.toString()
                }
              }
            ]

          }
        },
        "from": 0,
        "size": 10,
      }
      
      axios.post("/es/author/_search",data)
      .then(res=>{
        console.log(res);
        this.loading = false;
        this.label = "学者姓名"
        this.hits = res.data.hits.hits.map(item=>{
          return{
            id: item._source.id,
            value: item._source.name,
            url: `/portal?authorId=${item._source.id}`
          }
        })
      })
    },
    journalSearch(){
      let data={
        "_source": {
          "includes": ["id","name"]
        },
        "query": {
          "bool": {
            "must": [
              {
                "match_phrase": {
                  "name": this.input
                }
              }
            ]

          }
        },
        "from": 0,
        "size": 10,
      }

      axios.post("/es/journal/_search",data)
          .then(res=>{
            console.log(res);
            this.loading = false;
            this.label = "期刊名称"
            this.hits = res.data.hits.hits.map(item=>{
              return{
                id: item._source.id,
                value: item._source.name
              }
            })
          })
    },
    seriesSearch(){
      let data={
        "_source": {
          "includes": ["id","name"]
        },
        "query": {
          "bool": {
            "must": [
              {
                "match_phrase": {
                  "name": this.input
                }
              }
            ]

          }
        },
        "from": 0,
        "size": 10,
      }

      axios.post("/es/conference_series/_search",data)
          .then(res=>{
            console.log(res);
            this.loading = false;
            this.label = "会议录名称"
            this.hits = res.data.hits.hits.map(item=>{
              return{
                id: item._source.id,
                value: item._source.name
              }
            })
          })
    },
    instanceSearch(){
      let data={
        "_source": {
          "includes": ["id","name"]
        },
        "query": {
          "bool": {
            "must": [
              {
                "match_phrase": {
                  "name": this.input
                }
              }
            ]

          }
        },
        "from": 0,
        "size": 10,
      }

      axios.post("/es/conference_instance/_search",data)
          .then(res=>{
            console.log(res);
            this.label = "会议名称"
            this.hits = res.data.hits.hits.map(item=>{
              return{
                id: item._source.id,
                value: item._source.name
              }
            })
          })
    },
    fieldSearch(){
      let data={
        "_source": {
          "includes": ["id","name"]
        },
        "query": {
          "bool": {
            "must": [
              {
                "match_phrase": {
                  "name": this.input
                }
              }
            ]

          }
        },
        "from": 0,
        "size": 10,
      }

      axios.post("/es/field/_search",data)
          .then(res=>{
            console.log(res);
            this.label = "学科领域"
            this.hits = res.data.hits.hits.map(item=>{
              return{
                id: item._source.id,
                value: item._source.name
              }
            })
          })
    }
  },
  emits:["add"]
}
</script>

<style scoped>
.out{
  padding-left: 10px;
  padding-right: 10px;
}
.box{
  border: 1px solid #b3c0d1;
  padding: 5px;
}
.label{
  word-break: keep-all;
}
.link{
  font-size: 16px;
}
</style>